import React, { Component } from 'react'
import { Form, Input, Button, Select, message } from 'antd';
import {addOneAdminApi} from '../../apis/adminsApi'

const {Option} = Select
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};
export default class AddAccount extends Component {
    state = {
        loading:false,
    }
    onFinish = async(values) => {
        console.log('Success:', values);
        try {
            this.setState({loading:true})
            const data = await addOneAdminApi(values)
            console.log(data);
            this.setState({loading:false})
            message.success('添加成功');
            this.props.history.push(`/main/AdminsList`)
        } catch (error) {
            this.setState({loading:false})
            message.error('添加失败');
        }

    };
    onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };
    render() {
        const { loading } = this.state;
        return (
            <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }}>
                <Form
                    {...layout}
                    name="basic"
                    style={{ width: 400 }}
                    initialValues={{ role: "1" }}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                >
                    <Form.Item
                        label="账户名"
                        name="username"
                        rules={[{ required: true, message: '请输入你的用户名' }]}
                    >
                        <Input placeholder="请输入你的用户名" />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: '请输入你的密码' }]}
                    >
                        <Input.Password placeholder="请输入你的密码" />
                    </Form.Item>

                    <Form.Item label="角色" name="role"
                        rules={[{ required: true, message: '请输入选择角色!' }]}>
                        <Select style={{ width: 120 }} placeholder="请选择角色">
                            <Option value="1">超级管理员</Option>
                            <Option value="0">普通管理员</Option>
                        </Select>
                    </Form.Item>

                    <Form.Item {...tailLayout}>
                        <Button type="primary" htmlType="submit" loading={loading}>
                            添加
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}
